<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>音乐播放器</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 100vh;
    }
    .cover{
      position: absolute;
      content:'';
      display: block;
      width: 100%;
      height: 100%;
      background: url(http://cloud.hunger-valley.com/17-9-22/87786461.jpg)  center center no-repeat;
      background-size: cover;
      filter: blur(5px);
    }
    .musicbox {
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      font-family: cursive;
      font-size: 16px;
      color: #f06d6a;
      width: 340px;
    }
    .music-panel {
      border: 1px solid #76dba3;
      padding: 20px 20px 5px 20px;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
      background-color: rgba(255, 255, 255, 0.9);
    }    
    .musicbox .control {
      margin-top: 20px;
      font-size: 22px;
      color: #ee8a87;
      float: left;
    }
    
    .musicbox .control .fa {
      margin-right: 12px;
      cursor: pointer;
    }
    
    .musicbox .control .fa.disable {
      opacity: 0.3;
    }
    
    .musicbox .info {
      margin-left: 120px;
    }
    
    .musicbox .info .title {
      font-size: 18px;
    }
    
    .musicbox .info .auther {
      font-size: 13px;
    }
    
    .musicbox .progress {
      width: 260px;
    }
    
    .musicbox .progress .bar {
      height: 3px;
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }
    
    .musicbox .progress .progress-now {
      background-color: #ee8a87;
      height: 3px;
      width: 0;
      position: relative;
    }
    
    .musicbox .time {
      text-align: right;
    }
    
    .musicbox:after,
    .musicbox .music:after {
      content: '';
      display: block;
      clear: both;
    }

    .musicbox .list{
      list-style: none;
    }
    .musicbox .list>li{
      position: relative;
      padding: 4px 10px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-top: none;
      overflow: hidden;
      cursor: pointer;
    }
    .musicbox .list>li:hover {
      background-color: rgba(255,255, 255,0.5);
    }
    .musicbox .list>li.playing:before{
      position: absolute;
      top: 0;
      left: 0;
      content:'';
      display: inline-block;
      width: 8px;
      height: 30px;
      background: rgba(255, 255, 255, 0.8);
    }
  </style>
</head>

<body>
  <div class="cover"></div>
  <div class="musicbox">
    <div class="music-panel">
      <div class="music">
        <div class="control">
          <span class="back"><i class="fa fa-step-backward"></i></span>
          <span class="play"><i class="fa fa-pause"></i></span>
          <span class="forward"><i class="fa fa-step-forward"></i></span>
        </div>
        <div class="info">
          <div class="title">My song</div>
          <div class="auther">ruoyu</div>
        </div>
      </div>

      <div class="progress">
        <div class="bar">
          <div class="progress-total"></div>
          <div class="progress-now"></div>
        </div>
        <div class="time">0:00</div>
      </div>      
    </div>
    <ul class="list">
      <!-- <li>贰佰-玫瑰</li> -->
    </ul>

  </div>


  <script>

  var musiclist = []
  var currentIndex = 0
  var clock
  var audio = new Audio()
  audio.autoplay = true

  getMusiclist(function start(list){
  	musiclist = list
  	loadMusic(list[currentIndex])
  })

  audio.ontimeupdate = function(){
  	$('.musicbox .progress-now').style.width = (this.currentTime/this.duration)*100 + '%'
  }


    audio.onplay = function(){
      clock = setInterval(function(){
        var min = Math.floor(audio.currentTime/60)
        var sec = Math.floor(audio.currentTime)%60 + ''
        sec = sec.length === 2? sec : '0' + sec
        $('.musicbox .time').innerText = min + ':' + sec
      }, 1000)

    }

  audio.onpause = function(){
  	clearInterval(clock)
  }

  audio.onended = function(){
  	currentIndex = (++currentIndex)%musiclist.length
  	loadMusic(musiclist[currentIndex])
  }

  $('.musicbox .play').onclick = function(){
  	if (audio.paused) {
  		audio.play()
  		this.querySelector('.fa').classList.remove('fa-play')
  		this.querySelector('.fa').classList.add('fa-pause')
  	}else{
  		audio.pause()
  		this.querySelector('.fa').classList.add('fa-play')
  		this.querySelector('.fa').classList.remove('fa-pause')
  	}
  }


  $('.musicbox .forward').onclick = function(){
  	currentIndex = (++currentIndex)%musiclist.length
  	loadMusic(musiclist[currentIndex])
  }


  $('.musicbox .back').onclick = function(){
  	currentIndex = (musiclist.length + --currentIndex)%musiclist.length
  	loadMusic(musiclist[currentIndex])
  }


  $('.musicbox .bar').onclick = function(e){
  	var percent = e.offsetX / parseInt(getComputedStyle(this).width)
  	audio.currentTime = audio.duration * percent
  }


  function $(selector){
  	return document.querySelector(selector)
  }


  function getMusiclist(callback){
	  var xhr = new XMLHttpRequest()
	  xhr.open('GET','/music-player/music.json',true)
	  xhr.onload = function(){
	  	if((xhr.status >=200 && xhr.status < 300) || xhr.status ===304){
	  		callback(JSON.parse(this.responseText))
	  	}else{
	  		console.log('获取数据失败')
	  	}
	  }
	  xhr.onerror = function(){
	  	console.log('网络异常')
	  }
	  xhr.send()  	
  }

  function loadMusic(musicObj){
  	$('.musicbox .title').innerText = musicObj.title
  	$('.musicbox .auther').innerText = musicObj.auther
  	$('.cover').style.backgroundImage = 'url(' + musicObj.img + ')'
  	audio.src = musicObj.src
  }

  </script>
</body>

</html>